package com.hgm.study.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.insets.statusBarsPadding
import com.hgm.study.ui.components.ChartView
import com.hgm.study.ui.components.CircleRing
import com.hgm.study.ui.components.DailyTaskContent
import com.hgm.study.ui.components.appBarHeight
import com.hgm.study.viewmodel.TaskViewModel

/**
 * @author    HGM
 * @version   1.0
 */
@Composable
fun TaskScreen(taskVM: TaskViewModel = viewModel()) {
      //圆环高度
      var boxWidthDp: Int
      with(LocalConfiguration.current) {
            boxWidthDp = screenWidthDp / 2
      }

      //当学年积分改变时，重新计算百分比
      LaunchedEffect(taskVM.pointOfYear) {
            with(taskVM) {
                  updatePointPercent()
                  //updateDayTips()
            }
      }



      Column(
            modifier = Modifier
                  .fillMaxSize()
                  .background(
                        Brush.verticalGradient(listOf(Color(0xFF149EE7), Color.White))
                  )
      ) {
            Row(
                  modifier = Modifier
                        .statusBarsPadding()
                        .height(appBarHeight),
                  verticalAlignment = Alignment.CenterVertically
            ) {
                  Text(
                        text = "学习任务",
                        fontSize = 18.sp,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center,
                        color = Color.White
                  )
            }

            LazyColumn(horizontalAlignment = Alignment.CenterHorizontally) {
                  //学习周期
                  item {
                        Text(
                              text = taskVM.taskDate,
                              fontSize = 12.sp,
                              color = Color.White,
                              textAlign = TextAlign.Center,
                              modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(8.dp)
                        )
                  }

                  //学习进度
                  item {
                        Box(
                              contentAlignment = Alignment.Center,
                              modifier = Modifier
                                    .padding(vertical = 16.dp)
                                    .height(boxWidthDp.dp)
                        ) {
                              //圆环
                              CircleRing(boxWidthDp, taskVM)

                              //进度数据
                              Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                    Text(
                                          buildAnnotatedString {
                                                append(taskVM.pointOfYear.toString())
                                                withStyle(SpanStyle(fontSize = 12.sp)) {
                                                      append("分")
                                                }
                                          },
                                          fontSize = 36.sp,
                                          color = Color.White
                                    )

                                    Text(text = "学年积分", fontSize = 12.sp, color = Color.White)
                              }
                        }
                  }

                  //积分详情
                  item {
                        Row(
                              modifier = Modifier
                                    .fillMaxWidth()
                                    .offset(y = (-54).dp),
                              horizontalArrangement = Arrangement.SpaceAround,
                        ) {
                              Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                    Text(
                                          text = "${taskVM.totalPointOfYear}分",
                                          color = Color.White,
                                          fontSize = 16.sp
                                    )
                                    Text(text = "学年规定积分", color = Color.White, fontSize = 16.sp)
                              }
                              Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                    Text(
                                          text = "${taskVM.totalPointOfYear - taskVM.pointOfYear}分",
                                          color = Color.White,
                                          fontSize = 16.sp
                                    )
                                    Text(text = "还差", color = Color.White, fontSize = 16.sp)
                              }
                        }
                  }

                  //学习明细
                  item {
                        Column(
                              modifier = Modifier
                                    .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
                                    .background(Color.White)
                                    .fillMaxSize()
                                    .padding(16.dp)
                        ) {
                              Text(text = "学习明细", fontWeight = FontWeight.Bold, fontSize = 18.sp)
                              Text(
                                    text = "最近一周获得积分情况",
                                    color = Color.Gray,
                                    modifier = Modifier.padding(top = 4.dp)
                              )


                              //折线图
                              ChartView(modifier = Modifier.padding(vertical = 14.dp),taskVM.pointsOfWeek)

                              Row(modifier = Modifier.padding(top = 8.dp)) {
                                    taskVM.days.forEach {
                                          Text(
                                                text = it,
                                                color = Color(0xFF999999),
                                                fontSize = 14.sp,
                                                modifier = Modifier.weight(1f),
                                                textAlign = TextAlign.Center
                                          )
                                    }
                              }


                              //今日任务提醒
                              Text(
                                    text = taskVM.dayTips,
                                    color =Color(0xFF149EE7),
                                    fontSize = 14.sp,
                                    modifier = Modifier
                                          .padding(vertical = 16.dp)
                                          .clip(RoundedCornerShape(4.dp))
                                          .fillMaxWidth()
                                          .background(Color(0x33149EE7))
                                          .padding(8.dp)
                              )


                              //每日任务
                              DailyTaskContent()
                        }
                  }
            }
      }

}
